<template>
  <!--  监测设备管理页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.queryString" clearable placeholder="设备编号/传感器SN/采集仪SN">
        <template slot="prepend">筛选条件</template>
      </el-input>
      <el-select v-model="form.onlineStatus" style="width: 150px;" clearable placeholder="设备状态">
        <el-option
          v-for="item in EnumEquipStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-radio-group v-model="form.monitorType" @change="form.page=1;queryList()" style="margin-bottom: 20px">
        <el-radio-button label=""><i class="iconfont icongongyinglianziliao radio-button_icon"></i>所有类型
        </el-radio-button>
        <el-radio-button v-for="item in ProjectMonitorType" :key="item.code" :label="item.code">
          <i class="iconfont radio-button_icon" :class="item.code | gradeMonitorType"></i>{{item.name}}
        </el-radio-button>
      </el-radio-group>
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <!-- table -->
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="caseCode" sortable label="设备编号" min-width="145">
        </el-table-column>
        <el-table-column prop="sensorSn" show-overflow-tooltip label="传感器编号" min-width="165">
        </el-table-column>
        <el-table-column prop="sensorTypeName" label="可监测类型" min-width="140"></el-table-column>
        <el-table-column prop="equipSn" sortable label="采集板SN" min-width="165">
        </el-table-column>
        <el-table-column prop="equipName" label="设备型号" min-width="120"></el-table-column>
        <el-table-column prop="monitorPointName" label="监测信息" min-width="200">
          <template slot-scope="scope">
            {{scope.row.monitorPointName?scope.row.monitorPointName:''}}
            <el-popover
              style="padding: 5px"
              placement="top-start"
              width="250"
              trigger="click">
              <p class="equip_label">项目名称:<span class="info">{{scope.row.projectName}}</span></p>
              <p class="equip_label">监测对象:<span class="info">{{scope.row.workPointName}}</span></p>
              <p class="equip_label">监测点位:<span class="info">{{scope.row.monitorPointName}}</span></p>
              <p class="equip_label">监测类型:<span class="info">{{scope.row.monitorTypeName}}</span></p>
              <button slot="reference"><i style="margin-left: 5px;font-size: 15px;color: #1990FE"
                                          class="el-icon-warning"
                                          v-if="scope.row.monitorPointName"></i></button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="equipIdStatus" label="设备状态" min-width="120">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.equipIdStatus | equipStatusColor" style="color: white">
              {{scope.row.equipIdStatus}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="170" label="最新数据时间">
          <template slot-scope="scope">{{scope.row.newestTime | formatTimer}}</template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="130">
          <template slot-scope="scope">
            <el-button :disabled="!scope.row.monitorPointId" type="text" class="btn_jump" @click="clickData(scope.row)">
              查看监测数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
    </div>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>

<script>
  import {
    pointDeviceQuery
  } from '@/services/model/sensor'
  import Format from '@/utils/format'
  import XLoading from '@/components/animation/x-loading.vue'
  import Enums from '@/utils/enums'
  import {actions} from "./work-point.store";

  export default {
    components: {XLoading},
    mixins: [Enums],
    data() {
      return {
        // 接口正在加载
        isLoading: false,
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
          monitorType: ''
        },
        currentRow: {},

        tableList: [],
        EnumEquipStatusList: [],
        ProjectMonitorType: []
      }
    },
    filters: {
      gradeMonitorType(val) {
        let iconMap = {
          1: 'iconshenbuweiyicexieyi',
          2: 'iconGNSS',
          3: 'iconlaxianweiyi',
          4: 'iconjiangyuliang',
          5: 'icondixiashuiwei',
          6: 'iconmaosuochuanganqi',
          7: 'iconjinglishuizhunyi2',
          8: 'iconqingjiao',
          9: 'iconxianxingtu',
          10: 'iconshidu',
          11: 'iconfengsufengxiangjiance',
          12: 'icondiyingli',
          13: 'iconzhendong',
          14: 'iconjianshiqicai01',
          15: 'iconGNSS',
          16: 'iconjianshiqicai01',
          17: 'iconzhendong',
          18: 'iconleida',
          19: 'iconshengguangbaojing',
          20: 'icona-fenzu1',
          21: 'iconzhendong',
          22: 'icondb_fill',
          23: 'iconzhendong',

        }
        return iconMap[val]
      },

      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer))
        }
        return ''
      },
      equipStatusColor(val) {
        switch (val) {
          case '在线':
            return 'background-color:#0DC26B'
          case '离线':
            return 'background-color:#e43321'
          default:
            return 'background-color:#03a9f4'
        }
      },
    },
    methods: {
      // 最新数据行点击
      async clickData(row) {
        await actions.queryProjectInfo(row.projectId)
        await actions.queryWorkPointList(row.projectId)
        this.$router.push({
          path: `/project/${row.projectId}/data-share?activeId=${row.monitorPointId}&monitorType=${row.monitorType}&workPointId=${row.workPointId}`
        })
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      async queryList() {
        this.isLoading = true
        let res = await pointDeviceQuery(this.form)
        this.tableList = res.data?.records
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false
      },
    },
    activated() {
      this.queryList()
    },
    mounted() {
      //	传感器型号下拉框
      this.queryDictList(['EnumProjectMonitorType', 'EnumEquipStatus'], ['ProjectMonitorType', 'EnumEquipStatusList'])
    }
  }
</script>

<style scoped="scoped" lang="less">
  /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #1b1b1b;
  }

  .btn-other {
    color: #e6a23c;
  }

  .btn_jump {
    color: #00d600;
  }

  .equip_label {
    color: #1990FE;
    font-size: 10px;
    padding: 2px 0 3px 10px;

    .info {
      color: #000000;
      margin-left: 5px;
    }
  }
</style>
